@charset "utf-8";

$mh-brand-search-bg: #EEEEEE;

.mh-brand {
  padding: 2.5rem 0;
  border-top: 2px solid $brand-primary;
}

.mh-brand-logo-wrapper {
  position: relative;
  float: left;
  width: 4rem;
  height: 4rem;
  margin-right: .5rem;
}

.mh-brand-logo {
  width: 4rem;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  
  &.long {
    width: 474px;
    height: 63px;
  }
}

.mh-brand-link {
  display:inline-block;
  min-width:30rem;
  position: relative;
  z-index: 1;
}

.mh-brand-title {
  font-size: 2.5rem;
  font-weight: 800;
}

.mh-brand-subtitle {
  font-size: 1rem;
}

.mh-brand-right {
  position: absolute;
  right: 0;
  top: 50%;
  width: 100%;
  transform: translate(0, -50%);
}

.mh-brand-search {
  display: inline-block;
  max-width: calc(100% - 15rem);
}

.mh-brand-user {
  float: right;
  display: inline-block;
  
  .btn {
    margin-left: .5rem;
  }
}

.mh-brand-search-input {
  float: right !important;
  transition: max-width 333ms;
  max-width: 10rem;
  border: none;
  background: $mh-brand-search-bg;
  border-top-left-radius: 1.2em !important;
  border-bottom-left-radius: 1.2em !important;
  padding-left: 1em;
  box-shadow: none;
  
  &:focus {
    max-width: 18rem;
    box-shadow: none;
  }
}

.mh-brand-search-btn {
  border: none;
  background: $mh-brand-search-bg;
  border-top-right-radius: 1.2em;
  border-bottom-right-radius: 1.2em;
  padding-right: 1em;
  
  &:active {
    box-shadow: none;
  }
}

.mh-brand-search-divider {
  position: relative;
  float: right;
  display: table-cell;
  z-index: 4;
  height: 34px;
  
  &:after {
    content: "";
    position: absolute;
    display: block;
    width: 2px;
    background: $border-color;
    height: 69%;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
  }
}

#mh-brand-user-logged-in {
  & > a {
    &:hover {
      text-decoration: none;
    }
  }
  
  .mh-icon-user {
    float: left;
    margin-right: 1rem;
  }
}